I am new to the JS and I am coding a vanilla project which is a counter. When I add "addEventListener", this method does not work. Here is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js" async></script>
<title>Counter</title>
</head>
<body>
<h2 class="title">Counter</h2>
<span id="value">0</span>
<div class="container">
<button class="btn increase" type="button">Increase</button>
<button class="btn decrease" type="button">Decrease</button>
<button class="btn reset" type="button">Reset</button>
</div>
</body>
</html>
Here is my JS file:
let counter = 0
const btns = document.getElementsByClassName("btn")
const value = document.getElementById("value")
function getButton() {
for (let i = 0; i < btns.length; i++) {
getBtn = btns[i]
getBtn.addEventListener("click", function (event) {
console.log("clicked")
// let buttonClicked = event.target
// if (buttonClicked.classList.contains("increase")) {
// counter++
// }
// value.innerText = counter
})
}
}
The problem when I click the button, console.log("clicked") is not showed on the console. Also, I got an issue from console:
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced. To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData. Note that for performance reasons, only the first access to one of the properties is shown. 1 source content-script-utils.js:1 Learn more: User-Agent String Reduction
I searched a little bit but I dont know whether it is related with my JS file.